<template>
  <div class="body">
    <el-dialog v-model="dialogVisible" :title="file_name" top="2vh" width="92%">
      <template #default>
        <div class="main">
          <filePreview :fileUrl="source" />
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref } from "vue";
import axios from "axios";
import filePreview from "@/components/main/filePreview.vue";
export default {
  components: {
    filePreview,
  },
  data() {
    return {
      host_url: "http://127.0.0.1:8000/api",
      source: ref("http://127.0.0.1:8000/api/media/1.pdf"), //http://127.0.0.1:8000/api/media/temp_file/graph.txt
      dialogVisible: ref(false),
      file_name: ref(""),
      filetype: "pdf",
      // 文本pre
      textPre: "",
    };
  },
  methods: {
    // 如果是 .docx .xlsx .txt(文本类型), 需要获取获取文件数据
    getFileData(fileUrl, responseType = "blob", method = "GET") {
      return axios({
        url: fileUrl,
        method,
        responseType, // 配置响应数据的格式(默认json)
      }).then(
        (res) => {
          if (res.data.size <= 0) console.log("空文件?");
          // 如果url地址中没有后缀名, 需要在res.data.type中获取
          // console.log( res );
          return res.data;
        },
        (e) => console.log(e)
      );
    },
    // text转pre
    async renderText() {
      console.log("renderText");

      const text = await this.getFileData(this.fileUrl, "text");
      this.textPre = text;

      console.log("renderText..finished");
    },
    show_file(item, show) {
      this.dialogVisible = show;
      this.file_name = item.filename;
      var file_url = this.host_url + item.file_url;
      this.source = file_url;
    },
  },
};
</script>
 
<style>
.body {
  width: 100vw;
  height: 100vh;
}
.main {
  box-sizing: border-box;
  width: 100%;
  height: 75vh;
  overflow-y: auto;
}
</style>
